<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>违章记录</title>
    <style>
        .data {
            border-collapse: collapse;
        }
        .data td {
            border: 1px solid gray;
        }
        .wide {
            width: 200px;
        }
        .narrow {
            width: 120px;
        }
    </style>
</head>
<body>
    {% verbatim %}
    <div id="app">
        <input type="text" size="30" v-model="carno" @keydown.enter="search()" @change="change()" placeholder="请输入车牌号或车主姓名">
        <input type="date" v-model="minDate">
        <input type="date" v-model="maxDate">
        <button @click="search()">查询</button>
        <hr>
        <table class="data">
            <tr>
                <th class="narrow">车牌号</th>
                <th class="narrow">车主</th>
                <th class="narrow">违章原因</th>
                <th class="wide">违章日期</th>
                <th class="wide">处罚方式</th>
                <th class="narrow">是否受理</th>
                <th class="narrow">操作</th>
            </tr>
            <tr v-for="record in records">
                <td>{{ record.car.carno }}</td>
                <td>{{ record.car.owner }}</td>
                <td>{{ record.reason }}</td>
                <td>{{ record.makedate }}</td>
                <td>{{ record.punish }}</td>
                <td>
                    <span v-if="record.dealt">已受理</span>
                    <span v-if="!record.dealt">未受理</span>
                </td>
                <td>
                    <button :disabled="record.dealt" @click="handleItem(record)">受理</button>
                    <button :disabled="!record.dealt" @click="deleteItem(record)">删除</button>
                </td>
            </tr>
        </table>
        <p>
            <a href="" @click.prevent="firstPage()">首页</a>&nbsp;&nbsp;
            <a href="" @click.prevent="prevPage()">上一页</a>&nbsp;&nbsp;
            第{{ currentPage }}页/共{{ totalPage }}页&nbsp;&nbsp;
            <a href="" @click.prevent="nextPage()">下一页</a>&nbsp;&nbsp;
            <a href="" @click.prevent="lastPage()">末页</a>&nbsp;&nbsp;
        </p>
    </div>
    {% endverbatim %}
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                records: [],
                carno: '',
                minDate: '',
                maxDate: '',
                currentPage: 1,
                totalPage: 0,
                loaded: false
            },
            methods: {
                getData() {
                    fetch(`/api/records/?carno=${this.carno}&min_date=${this.minDate}&max_date=${this.maxDate}&page=${this.currentPage}`)
                        .then(resp => resp.json())
                        .then(json => {
                            this.records = json.results
                            this.totalPage = parseInt((json.count - 1) / 5) + 1
                        })
                },
                change() {
                    this.loaded = false
                },
                search() {
                    this.currentPage = 1
                    this.totalPage = 0
                    this.getData()
                    this.loaded = true
                },
                firstPage() {
                    if (this.loaded && this.currentPage != 1) {
                        this.currentPage = 1
                        this.getData()
                    }
                },
                lastPage() {
                    if (this.loaded && this.currentPage != this.totalPage) {
                        this.currentPage = this.totalPage
                        this.getData()
                    }
                },
                prevPage() {
                    if (this.loaded && this.currentPage > 1) {
                        this.currentPage -= 1
                        this.getData()
                    }
                },
                nextPage() {
                    if (this.loaded && this.currentPage < this.totalPage) {
                        this.currentPage += 1
                        this.getData()
                    }
                },
                handleItem(record) {
                    fetch(`/api/records/${record.id}/`, {
                        method: 'PATCH',
                        body: JSON.stringify({dealt: true}),
                        headers: {
                            'content-type': 'application/json'
                        }
                    })
                        .then(resp => resp.json())
                        .then(json => record.dealt = json.dealt)
                },
                deleteItem(record) {
                    if (confirm('确定要删除吗?')) {
                        fetch(`/api/records/${record.id}/`, {
                            method: 'DELETE'
                        })
                            .then(resp => {
                                if (resp.status == 204) {
                                    let index = this.records.indexOf(record)
                                    this.records.splice(index, 1)
                                }
                            })
                    }
                }
            }
        })
    </script>
</body>
</html>